<template>
  <view :style="{height: pageHeight, overflow: 'hidden'}">
    <!-- 搜索区域 -->
    <search @search="disableScroll" />
    <!-- 轮播图 -->
    <swiper class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff" autoplay circular>
      <swiper-item v-for="item in bannerList" :key="item.goods_id">
        <navigator :url="'/pages/goods/index?id=' + item.goods_id">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 导航条 -->
    <view class="navs">
      <navigator open-type="switchTab" url="/pages/category/index" v-for="(item,index) in nav_arr" :key="index">
        <image :src="item.image_src"></image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floors">
      <view class="floor" v-for="(item,index) in floor_arr" :key="index">
        <view class="title">
          <image :src="item.floor_title.image_src"></image>
        </view>
        <view class="items">
          <navigator :url="one.navigator_url" v-for="one in item.product_list" :key="one.name">
            <image :src="one.image_src"></image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 回到顶部 -->
    <!-- 这里不能使用 v-show uni不支持 -->
    <view class="goTop icon-top" @tap="scrollTo" v-if="scrollTop > 200"></view>
  </view>
</template>

<script>
  import search from '@/components/search';
import { log } from 'util';
import { request } from 'http';

  export default {

    data () {
      return {
        pageHeight: 'auto',
        //接收轮播数据
        bannerList:[],
        //导航数据
        nav_arr:[],
        //楼层数据
        floor_arr:[],
        //屏幕的滚动距离
        scrollTop:0
      }
    },

    components: {
      search
    },
    
    methods: {
      disableScroll (ev) {
        this.pageHeight = ev.pageHeight + 'px';
      },
      //获取轮播数据接口
      async getSwiperList () {
        //async await 以同步的方式写异步
        // const [err,res] = await uni.request({
        //   url:'https://api-ugo-web.itheima.net/api/public/v1/home/swiperdata'
        // })
        // console.log(res);

        //优化过后的请求 结构赋值得到message
        const {message} = await this.newRequest({
          url:'/api/public/v1/home/swiperdata'
        })
        this.bannerList = message
      },
      //获取导航数据的接口
      async get_nav () {
        const {message} = await this.newRequest({
          url:'/api/public/v1/home/catitems'
        })
        this.nav_arr = message
      },
      //获取楼层数据的接口
      async get_floor () {
        const {message} = await this.newRequest({
          url:'/api/public/v1/home/floordata'
        })
        this.floor_arr = message
      },
      //点击回到顶部的函数
      scrollTo () {
        uni.pageScrollTo({
          scrollTop:0
        })
      }
    },
    //小程序的生命周期函数 页面加载时触发,只会调用一次
    onLoad () {
      this.getSwiperList(),
      this.get_nav(),
      this.get_floor()
    },
    //下拉刷新执行函数,特别的生命周期函数
    async onPullDownRefresh() {
      await this.getSwiperList(),
      await this.get_nav(),
      await this.get_floor()
      //刷新完成关闭下拉刷新
      uni.stopPullDownRefresh()
    },
    //屏幕滚动执行的生命周期函数 uni的
    onPageScroll (e) {
        // console.log(e);
        this.scrollTop = e.scrollTop
    }
  }
</script>

<style scoped lang="less">
  .banner {
    width: 100%;
    height: 340rpx;

    image {
      width: 100%;
      height: 340rpx;
    }
  }

  .navs {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 44rpx;

    image {
      width: 128rpx;
      height: 140rpx;
    }
  }

  .floor {

    .title {
      width: 750rpx;
      height: 60rpx;
      padding: 20rpx 0 0 8rpx;
      background-color: #f4f4f4;
    }

    .items {
      padding: 20rpx 16rpx;
      overflow: hidden;

      navigator {
        width: 193rpx;
        height: 188rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
        float: left;
      }

      navigator:first-child {
        width: 232rpx;
        height: 386rpx;
        margin-left: 0rpx;
      }

      navigator:nth-child(2),
      navigator:nth-child(5) {
        width: 273rpx;
      }
    }

    &:first-child {

      .items {

        navigator {
          width: 233rpx;
        }
      }
    }
  }

  .goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;
  
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
</style>